<template>
    <div class="survey container-content">
        <el-row :gutter="20">
            <el-col :span="24">
                <h3 class="panel-title">库存管理</h3>
            </el-col>
        </el-row>
        <el-divider class="divider"></el-divider>
        <el-row :gutter="20" class="mt20">
            <el-col :span="6">
                <el-card>
                    <el-tree
                        :data="treeData"
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                    >
                        <!-- <template slot-scope="{ data, node }">
                            <el-row
                                type="flex"
                                justify="space-between"
                                align="middle"
                                style="height: 40px; width: 100%"
                            >
                                <el-col :span="20">
                                    <span>
                                        <i
                                            v-if="data.treeList.length === 0"
                                            class="el-icon-folder"
                                        ></i>
                                        <i
                                            v-else
                                            :class="
                                                node.expanded
                                                    ? 'el-icon-folder-opened'
                                                    : 'el-icon-folder'
                                            "
                                        ></i>
                                        {{ data.typeName }}
                                    </span>
                                </el-col>
                            </el-row>
                        </template> -->
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="18">
                <!-- <el-row class="export-container">
                    <el-button type="primary" @click="addNewData"
                        >新增</el-button
                    >
                    <el-button type="primary" @click="exporting"
                        >导出</el-button
                    >
                </el-row> -->
                <el-row class="filter-container">
                    <el-col :span="24">
                        <el-input
                            placeholder="查询..."
                            v-model="searchValue"
                            class="input-with-select"
                            @change="searchData"
                        >
                            <el-button
                                slot="append"
                                icon="el-icon-search"
                                type="primary"
                                @click="searchData"
                            ></el-button>
                        </el-input>
                    </el-col>
                </el-row>
                <el-table
                    ref="customerTable"
                    :data="tableData"
                    stripe
                    style="width: 100%"
                >
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <!-- <el-table-column prop="id" label="id"> </el-table-column> -->
                    <el-table-column
                        prop="materialName"
                        label="物料名称"
                    ></el-table-column>
                    <el-table-column
                        prop="materialCode"
                        label="物料编码"
                    ></el-table-column>
                    <el-table-column
                        prop="typeName"
                        label="分类名称"
                    ></el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                    <el-table-column prop="model" label="规格型号">
                    </el-table-column>
                    <el-table-column prop="paramDesc" label="参数说明">
                    </el-table-column>
                    <el-table-column
                        prop="brand"
                        label="品牌"
                    ></el-table-column>
                    <el-table-column prop="type" label="物料类型">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type == '1'"
                                >自购物料</el-tag
                            >
                            <el-tag v-if="scope.row.type == '2'"
                                >甲购物料</el-tag
                            >
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="详情"
                                placement="bottom"
                            >
                                <el-button
                                    plain
                                    icon="el-icon-more"
                                    size="small"
                                    @click="
                                        handleDetail(scope.$index, scope.row)
                                    "
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="编辑"
                                placement="bottom"
                            >
                                <el-button
                                    type="primary"
                                    plain
                                    size="small"
                                    icon="el-icon-edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                ></el-button>
                            </el-tooltip>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="删除"
                                placement="bottom"
                            >
                                <el-button
                                    type="danger"
                                    plain
                                    size="small"
                                    icon="el-icon-delete"
                                    @click="
                                        handleDelete(scope.$index, scope.row)
                                    "
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="table-pagination"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {
    getMaterialTypeList,
    getMaterialInfoList,
} from "@/api/system/warehouse";
export default {
    data() {
        return {
            searchValue: "",
            total: 0,
            pageSize: 0,
            treeData: [],
            defaultProps: {
                children: "treeList",
                label: "typeName",
            },
            tableData: [],
        };
    },
    methods: {
        exporting() {},

        // 删除事件
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteInvenstoryList(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 搜索事件
        searchData() {
            // let searchValue = this.searchValue;
            // searchSurvey({ searchValue }).then((res) => {
            //   this.tableData = res.rows;
            //   console.log("请求成功", res);
            // });
        },
        //新增按钮
        addNewData(index) {
            if (index === "first") {
                this.$router.push({ path: "/Warehouse/AddInventory" });
            } else {
                this.$router.push({ path: "/Warehouse/AddInventorySelf" });
            }
        },
        //编辑按钮
        handleEdit(index, row) {
            // let data = JSON.stringify(row);
            // this.$router.push({ path: "/Survey/EditData", query: { data } });
        },
        // 详情按钮
        handleDetail(index, row) {
            // this.$router.push({ path: "/Survey/DetailData" });
        },
        getData() {
            getMaterialTypeList().then((res) => {
                this.treeData = res.rows;
            });
        },
        handleNodeClick(data) {
            if (data.leave == "1") {
                let oneTypeId = data.leave;
                let keyword = data.typeName;
                getMaterialInfoList({ oneTypeId, keyword }).then((res) => {
                    this.tableData = res.data.records;
                });
            }
            if (data.leave == "2") {
                let towTypeId = data.leave;
                let keyword = data.typeName;
                getMaterialInfoList({ towTypeId, keyword }).then((res) => {
                    this.tableData = res.data.records;
                });
            }
            if (data.leave == "3") {
                let typeId = data.leave;
                let keyword = data.typeName;
                getMaterialInfoList({ typeId, keyword }).then((res) => {
                    this.tableData = res.data.records;
                });
            }
        },
    },
    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}
.export-container {
    margin: 15px 0;
}
.pagination {
    margin-top: 10px;
}
</style>
